<template>
  <div class="mod-home">
    <div class="grand1" v-if="statistics">
      <div class="box1">
        <img :src="require('@/assets/img/order.png')" />
        <div class="right">
          <p>今日订单数</p>
          <p>{{ statistics.todayOrderNum }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/img/total-money.png')" />
        <div class="right">
          <p>今日销售总额</p>
          <p>{{ statistics.todayOrderAmount }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/img/yesterday.png')" />
        <div class="right">
          <p>昨日销售总额</p>
          <p>{{ statistics.yesterdayOrderAmount }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/img/7day.png')" />
        <div class="right">
          <p>近7天销售总额</p>
          <p>{{ statistics.sevenDayOrderAmount }}</p>
        </div>
      </div>
    </div>
    <el-card class="box-card" v-if="statistics">
      <div slot="header" class="clearfix">
        <span>待处理事务</span>
      </div>
      <div class="card1">
        <div class="flex">
          <div>
            <p>待付款订单</p>
            <p>
              (<span>{{ statistics.waitPayOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>待发货订单</p>
            <p>
              (<span>{{ statistics.waitShipOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>待收货订单数</p>
            <p>(<span>{{ statistics.waitReceiptOrderNum }}</span>)</p>
          </div>
        </div>
        <div class="flex">
          <div>
            <p>已完成订单</p>
            <p>
              (<span>{{ statistics.completeOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>退款成功维权单数</p>
            <p>(<span>{{ statistics.refundSuccessRightsOrderNum }}</span>)</p>
          </div>
          <div>
            <p>待退款维权订单数</p>
            <p>(<span>{{ statistics.waitRefundRightsOrderNum }}</span>)</p>
          </div>
        </div>
        <div class="flex">
          <div>
            <p>待收货维权单数</p>
            <p>
              (<span>{{ statistics.waitReceiptRightsOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>待处理维权订单</p>
            <p>(<span>{{statistics.waitDisposeRightsOrderNum}}</span>)</p>
          </div>

        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>运营快捷入口</span>
      </div>
      <div class="card2">
        <div @click="goRouter(roleType==2||roleType==3?'/merchant-product/productList':'/platform-product/productList')">
          <img :src="require('@/assets/img/add.png')" />
          <p>添加商品</p>
        </div>
        <div @click="goRouter(roleType==2||roleType==3?'/merchant-order/productOrderList':'/platform-order/product')">
          <img :src="require('@/assets/img/order-list.png')" />
          <p>订单列表</p>
        </div>
        <div @click="goCustomer()">
          <img :src="require('@/assets/img/kefu.png')" width="38" height="44"/>
          <p>线上客服</p>
        </div>
        <div @click="goRouter('sys-user')">
          <img :src="require('@/assets/img/user.png')" />
          <p>用户管理</p>
        </div>
        <!-- <div @click="goRouter()">
          <img :src="require('@/assets/img/order.png')" />
          <p>交易统计</p>
        </div>
        <div @click="goRouter()">
          <img :src="require('@/assets/img/order.png')" />
          <p>短信营销</p>
        </div> -->
        <div v-if="(roleType==0||roleType==1)" @click="goRouter(roleType==2||roleType==3?'/merchant-content/advertisingList':'/platform-ad/list')">
          <img :src="require('@/assets/img/banner.png')" />
          <p>广告管理</p>
        </div>
        <div v-if="roleType==0" @click="goRouter('/platform-content/classifyList')">
          <img :src="require('@/assets/img/zhuan.png')" />
          <p>专题管理</p>
        </div>
        <div v-if="roleType==2||roleType==3||roleType==0" @click="goRouter('/merchant-marketing/seckillList')">
          <img :src="require('@/assets/img/time.png')" />
          <p>秒杀管理</p>
        </div>
        <!-- <div @click="goRouter()">
          <img :src="require('@/assets/img/order.png')" />
          <p>新品推荐</p>
        </div> -->
      </div>
    </el-card>
    <div class="card-2">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品总览</span>
        </div>
        <div class="card3" v-if="goodsInfo">
          <div>
            <h3>{{ goodsInfo.down }}</h3>
            <p>已下架</p>
          </div>
          <div>
            <h3>{{ goodsInfo.up }}</h3>
            <p>已上架</p>
          </div>
          <div>
            <h3>{{ goodsInfo.rarely }}</h3>
            <p>库存紧张</p>
          </div>
          <div>
            <h3>{{ goodsInfo.all }}</h3>
            <p>全部商品</p>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户总览</span>
        </div>
        <div class="card3" v-if="memberInfo">
          <div>
            <h3>{{ memberInfo.today }}</h3>
            <p>今日新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.yesterday }}</h3>
            <p>昨日新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.this_month }}</h3>
            <p>本月新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.member_sum }}</h3>
            <p>会员总数</p>
          </div>
        </div>
      </el-card>
    </div>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>订单统计</span>
      </div>
      <div class="card4">
        <div class="left">
          <div class="row1" v-if="orderInfo && (isActive == 1 || isActive == 2)">
            <p>
              <span v-if="isActive == 1">本周</span><span v-if="isActive == 2">本月</span>订单总数
            </p>
            <h3>{{ orderInfo.current }}</h3>
            <p>
              {{ orderInfo.rate }}% 同比<span v-if="isActive == 1">上周</span><span v-if="isActive == 2">上月</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="date-piker">
            <div class="date">
              <!-- <span
                :class="isActive == 0 ? 'active' : ''"
                @click="dateChange(0)"
                >今日</span
              > -->
              <span :class="isActive == 1 ? 'active' : ''" @click="dateChange(1)">本周</span>
              <span :class="isActive == 2 ? 'active' : ''" @click="dateChange(2)">本月</span>
            </div>
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
            </el-date-picker>
          </div>
          <div>
            <chart ref="chart1" :options="orderOption" :auto-resize="true" style="width: 100%"></chart>
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>销售统计</span>
      </div>
      <div class="card4">
        <div class="left">
          <div class="row1" v-if="moneyInfo && (isActive2 == 1 || isActive2 == 2)">
            <p>
              <span v-if="isActive2 == 1">本周</span><span v-if="isActive2 == 2">本月</span>销售额
            </p>
            <h3>{{ moneyInfo.current }}</h3>
            <p>
              {{ moneyInfo.rate }}% 同比<span v-if="isActive2 == 1">上周</span><span v-if="isActive2 == 2">上月</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="date-piker">
            <div class="date">
              <!-- <span
                :class="isActive2 == 0 ? 'active' : ''"
                @click="dateChange2(0)"
                >今日</span
              > -->
              <span :class="isActive2 == 1 ? 'active' : ''" @click="dateChange2(1)">本周</span>
              <span :class="isActive2 == 2 ? 'active' : ''" @click="dateChange2(2)">本月</span>
            </div>
            <el-date-picker v-model="date2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate2">
            </el-date-picker>
          </div>
          <div>
            <chart ref="chart1" :options="saleOption" :auto-resize="true" style="width: 100%"></chart>
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { montYearData } from '@/utils'
import sysService from '@/api/sysService.js'
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      orderOption: {
        title: {
          text: '订单统计'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#17B3A3'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            itemStyle: {
              normal: {
                color: '#17B3A3'
              }
            },
            smooth: true,
            data: [],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      saleOption: {
        title: {
          text: '销售统计'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#17B3A3'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: '#17B3A3'
              }
            },
            smooth: true,
            data: [],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      date: null,
      date2: null,
      statistics: null,
      isActive: 1,
      isActive2: 1,
      weekOrMonthOrYear: null,
      memberInfo: null,
      goodsInfo: null,
      orderInfo: null,
      moneyInfo: null,
      params: {
        data_type: null,
        type: null
      },
      roleType: null,
      userInfo: {}
    }
  },
  created () {
    this.weekOrMonthOrYear = montYearData()
    this.roleType = JSON.parse(localStorage.getItem('userInfo')).roleType
    this.getBaseData()
    this.dateChange(1)
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    console.log(this.userInfo)
    setTimeout(() => {
      this.dateChange2(1)
    }, 500)
  },
  mounted () {

  },
  methods: {
    goRouter (url) {
      if (url) {
        this.$router.push({
          path: url

        })
      } else {
        this.$message.error('暂未开放，敬请期待！')
      }
    },
    // 跳转客服
    goCustomer () {
      seviceApi
        .getYxtShopInfo()
        .then((res) => {
          if (res && res.data.code === 200) {
            var userParam = {}
            userParam['userId'] = this.userInfo.userId
            userParam['shopId'] = res.data.data.id
            console.log(userParam)
            // eslint-disable-next-line no-unused-vars
            let webLoginUrl

            sysService
              .customerLogin(userParam)
              .then((res) => {
                if (res && res.data.code === 200) {
                  webLoginUrl = res.data.data.webLoginUrl
                  window.open(webLoginUrl)
                }
              })
          }
        })
    },
    // 第一个时间段筛选
    changeDate () {
      this.params.data_type = 'count'
      this.params.type = 'custom'
      this.params.startDay = this.date[0]
      this.params.endDay = this.date[1]
      this.isActive = 4
      this.statisticsBuyDays()
    },
    // 第二个时间段筛选
    changeDate2 () {
      this.params.data_type = 'amount'
      this.params.type = 'custom'
      this.params.startDay = this.date2[0]
      this.params.endDay = this.date2[1]
      this.isActive2 = 4
      this.statisticsBuyDays()
    },
    // 第一个时间段tab筛选
    dateChange (number) {
      delete this.params.startDay
      delete this.params.endDay
      this.params.data_type = 'count'
      this.isActive = number
      switch (number) {
        case 0:
          this.date = null
          break
        case 1:
          this.date = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.params.type = 'week'
          this.statisticsOrderNum()
          this.statisticsBuyDays()
          break
        case 2:
          this.date = [
            this.weekOrMonthOrYear.firstMonthDay,
            this.weekOrMonthOrYear.lastMonthDay
          ]
          this.params.type = 'month'
          this.statisticsOrderNum()
          this.statisticsBuyDays()
          break

        default:
          this.date = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.statisticsOrderNum()
      }
    },
    // 第二个时间段tab筛选
    dateChange2 (number) {
      this.params.data_type = 'amount'
      this.isActive2 = number
      switch (number) {
        case 0:
          this.date2 = null
          break
        case 1:
          this.date2 = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.params.type = 'week'
          this.statisticsMoney()
          this.statisticsBuyDays()
          break
        case 2:
          this.date2 = [
            this.weekOrMonthOrYear.firstMonthDay,
            this.weekOrMonthOrYear.lastMonthDay
          ]
          this.params.type = 'month'
          this.statisticsMoney()
          this.statisticsBuyDays()
          break

        default:
          this.date2 = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.statisticsMoney()
      }
    },

    getBaseData () {
      sysService.statisticsSingle().then((res) => {
        if (res && res.data.code == 200) {
          this.statistics = res.data.data
        }
      })
      sysService.memberStatistics().then((res) => {
        if (res && res.data.code == 200) {
          this.memberInfo = res.data.data
        }
      })
      sysService.goodStatistics().then((res) => {
        if (res && res.data.code == 200) {
          this.goodsInfo = res.data.data
        }
      })
    },
    statisticsBuyDays () {
      sysService.statisticsBuyDays(this.params).then((res) => {
        if (res && res.data.code == 200) {
          if (this.params.data_type == 'count') {
            this.orderOption.xAxis.data = res.data.list.map(
              (val) => val.time_str
            )
            this.orderOption.series[0].data = res.data.list.map(
              (val) => val.order_num
            )
            console.log(this.orderOption)
          } else {
            this.saleOption.xAxis.data = res.data.list.map(
              (val) => val.time_str
            )
            this.saleOption.series[0].data = res.data.list.map(
              (val) => val.order_amount
            )
            console.log(this.saleOption)
          }
        }
      })
    },
    statisticsMoney () {
      sysService
        .statisticsMoney({ type: this.isActive2 == 1 ? 'week' : 'month' })
        .then((res) => {
          if (res && res.data.code == 200) {
            this.moneyInfo = res.data.data
          }
        })
    },
    statisticsOrderNum () {
      sysService
        .statisticsOrderNum({ type: this.isActive == 1 ? 'week' : 'month' })
        .then((res) => {
          if (res && res.data.code == 200) {
            this.orderInfo = res.data.data
          }
        })
    }
  }
}
</script>

<style lang='scss' scoped>
.mod-home {
  line-height: 1.5;
}
.grand1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .box1 {
    display: flex;
    align-items: center;
    width: 20%;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 #f0f0f0;
    img {
      width: 50px;
      height: 50px;
      margin-left: 20px;
    }
    .right {
      margin-left: 10px;
    }
  }
}
.card1 {
  display: flex;
  justify-content: space-between;
  .flex {
    display: flex;
    width: 30%;
    flex-direction: column;
    div {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      span {
        color: red;
      }
    }
  }
}
.card2 {
  display: flex;
  justify-content: space-between;
  div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    // img {
    //   width: 50px;
    //   height: 50px;
    // }
  }
}
.card-2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .box-card {
    width: 48%;
  }
}

.card3 {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    p {
      margin: 0;
    }
  }
}
.card4 {
  display: flex;
  .left {
    width: 200px;
    .row1 {
      margin-bottom: 60px;
    }
  }
  .right {
    width: 100%;
  }
  .date-piker {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    .date {
      display: flex;
      margin-right: 20px;
      span {
        margin-right: 20px;
        cursor: pointer;
      }
      .active {
        color: #17b3a3;
      }
    }
  }
}
</style>

